<script setup>
import { useRouter, useRoute } from 'vue-router'
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';
import qs from 'qs';
const router = useRouter();
const route = useRoute();

const businessId = ref(route.query.businessId);
const business = ref({});
const foodArr = ref([]);
const user = ref(null);


// 在组件挂载时执行
onMounted(() => {
  // 从sessionStorage中获取用户信息
  user.value = JSON.parse(sessionStorage.getItem('user'));

  // 根据businessId查询商家信息
  axios.post('http://localhost/business/BusinessController/getBusinessById', qs.stringify({
    businessId: businessId.value
  })).then(response => {
    business.value = response.data;
  }).catch(error => {
    console.error(error);
  });
});

  // 根据businessId查询所属食品信息
  axios.post('http://localhost/food/FoodController/listFoodByBusinessId', qs.stringify({
    businessId: businessId.value
  })).then(response => {
    foodArr.value = response.data;
    foodArr.value.forEach(item => item.quantity = 0);
    if (user.value) {
      listCart();
    }
  }).catch(error => {
    console.error(error);
  });

const listCart = () => {
  axios.post('http://localhost/cart/CartController/listCart', qs.stringify({
    businessId: businessId.value,
    userId: user.value.userId
  })).then(response => {
    const cartArr = response.data;
    foodArr.value.forEach(foodItem => {
      foodItem.quantity = 0;
      cartArr.forEach(cartItem => {
        if (cartItem.foodId === foodItem.foodId) {
          foodItem.quantity = cartItem.quantity;
        }
      });
    });
    foodArr.value.sort();
  }).catch(error => {
    console.error(error);
  });
};

const add = (index) => {
  if (!user.value) {
    router.push({ path: '/login' });
    return;
  }
  if (foodArr.value[index].quantity === 0) {
    saveCart(index);
  } else {
    updateCart(index, 1);
  }
};

const minus = (index) => {
  if (!user.value) {
    router.push({ path: '/login' });
    return;
  }
  if (foodArr.value[index].quantity > 1) {
    updateCart(index, -1);
  } else {
    removeCart(index);
  }
};

const saveCart = (index) => {
  axios.post('http://localhost/cart/CartController/saveCart', qs.stringify({
    businessId: businessId.value,
    userId: user.value.userId,
    foodId: foodArr.value[index].foodId
  })).then(response => {
    if (response.data === 1) {
      foodArr.value[index].quantity = 1;
    } else {
      alert('向购物车中添加食品失败！');
    }
  }).catch(error => {
    console.error(error);
  });
};

const updateCart = (index, num) => {
  axios.post('http://localhost/cart/CartController/updateCart', qs.stringify({
    businessId: businessId.value,
    userId: user.value.userId,
    foodId: foodArr.value[index].foodId,
    quantity: foodArr.value[index].quantity + num
  })).then(response => {
    if (response.data === 1) {
      foodArr.value[index].quantity += num;
    } else {
      alert('向购物车中更新食品失败！');
    }
  }).catch(error => {
    console.error(error);
  });
};

const removeCart = (index) => {
  axios.post('http://localhost/cart/CartController/removeCart', qs.stringify({
    businessId: businessId.value,
    userId: user.value.userId,
    foodId: foodArr.value[index].foodId
  })).then(response => {
    if (response.data === 1) {
      foodArr.value[index].quantity = 0;
    } else {
      alert('从购物车中删除食品失败！');
    }
  }).catch(error => {
    console.error(error);
  });
};

const goToOrder = () => {
  router.push({
    path: '/order',
    query: { businessId: business.value.businessId }
  });
};

const totalPrice = computed(() => {
  return foodArr.value.reduce((total, item) => total + item.foodPrice * item.quantity, 0);
});

const totalQuantity = computed(() => {
  return foodArr.value.reduce((total, item) => total + item.quantity, 0);
});

const totalSettle = computed(() => {
  return totalPrice.value + (business.value.deliveryPrice || 0);
});
</script>

<template>
  <div class="wrapper">
    <!--header-->
    <header>
      <p>商家信息</p>
    </header>

    <!--商家logo部分-->
    <div class="logo">
      <img :src="business.businessImg">
    </div>

    <!--商家信息部分-->
    <div class="business_info">
      <h1>{{business.businessName}}</h1>
      <p>￥{{business.starPrice}}起送  ￥{{business.deliveryPrice}}配送</p>
      <p>{{business.businessExplain}}</p>
    </div>

    <!--食品列表部分-->
    <ul class="foods">
      <li v-for="(item,index) in foodArr">
        <div class="left">
          <img :src="item.foodImg">
          <div class="left_info">
            <h3>{{item.foodName}}</h3>
            <p>{{item.foodExplain}}</p>
            <P>￥{{item.foodPrice}}</P>
          </div>
        </div>
        <div class="right">
          <div>
            <i class="iconfont icon-jianhao-" @click="minus(index)" v-show="item.quantity!=0"></i>
          </div>
          <p>
            <span v-show="item.quantity!=0">{{item.quantity}}</span>
          </p>
          <div>
            <i class="iconfont icon-jiahao-" @click="add(index)"></i>
          </div>
        </div>
      </li>
<!--      <li>-->
<!--        <div class="left">-->
<!--          <img src="../assets/img/sp02.png">-->
<!--          <div class="left_info">-->
<!--            <h3>玉米鲜肉（水饺）</h3>-->
<!--            <p>玉米鲜肉</p>-->
<!--            <P>￥10</P>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="right">-->
<!--          <div>-->
<!--            <i class="iconfont icon-jianhao-"></i>-->
<!--          </div>-->
<!--          <p>-->
<!--            <span>2</span>-->
<!--          </p>-->
<!--          <div>-->
<!--            <i class="iconfont icon-jiahao-"></i>-->
<!--          </div>-->
<!--        </div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="left">-->
<!--          <img src="../assets/img/sp03.png">-->
<!--          <div class="left_info">-->
<!--            <h3>虾仁三鲜（蒸饺）</h3>-->
<!--            <p>虾仁三鲜</p>-->
<!--            <P>￥18</P>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="right">-->
<!--          <div>-->
<!--            &lt;!&ndash;                        <i class="iconfont icon-jianhao-"></i>&ndash;&gt;-->
<!--          </div>-->
<!--          <p>-->
<!--            &lt;!&ndash;                        <span>2</span>&ndash;&gt;-->
<!--          </p>-->
<!--          <div>-->
<!--            <i class="iconfont icon-jiahao-"></i>-->
<!--          </div>-->
<!--        </div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="left">-->
<!--          <img src="../assets/img/sp04.png">-->
<!--          <div class="left_info">-->
<!--            <h3>素三鲜（蒸饺）</h3>-->
<!--            <p>素三鲜</p>-->
<!--            <P>￥10</P>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="right">-->
<!--          <div>-->
<!--            &lt;!&ndash;                        <i class="iconfont icon-jianhao-"></i>&ndash;&gt;-->
<!--          </div>-->
<!--          <p>-->
<!--            &lt;!&ndash;                        <span>2</span>&ndash;&gt;-->
<!--          </p>-->
<!--          <div>-->
<!--            <i class="iconfont icon-jiahao-"></i>-->
<!--          </div>-->
<!--        </div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="left">-->
<!--          <img src="../assets/img/sp05.png">-->
<!--          <div class="left_info">-->
<!--            <h3>角瓜鸡蛋（水饺）</h3>-->
<!--            <p>角瓜鸡蛋</p>-->
<!--            <P>￥15</P>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="right">-->
<!--          <div>-->
<!--            &lt;!&ndash;                        <i class="iconfont icon-jianhao-"></i>&ndash;&gt;-->
<!--          </div>-->
<!--          <p>-->
<!--            &lt;!&ndash;                        <span>2</span>&ndash;&gt;-->
<!--          </p>-->
<!--          <div>-->
<!--            <i class="iconfont icon-jiahao-"></i>-->
<!--          </div>-->
<!--        </div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="left">-->
<!--          <img src="../assets/img/sp06.png">-->
<!--          <div class="left_info">-->
<!--            <h3>小白菜肉（水饺）</h3>-->
<!--            <p>小白菜肉</p>-->
<!--            <P>￥10</P>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="right">-->
<!--          <div>-->
<!--            &lt;!&ndash;                        <i class="iconfont icon-jianhao-"></i>&ndash;&gt;-->
<!--          </div>-->
<!--          <p>-->
<!--            &lt;!&ndash;                        <span>2</span>&ndash;&gt;-->
<!--          </p>-->
<!--          <div>-->
<!--            <i class="iconfont icon-jiahao-"></i>-->
<!--          </div>-->
<!--        </div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="left">-->
<!--          <img src="../assets/img/sp07.png">-->
<!--          <div class="left_info">-->
<!--            <h3>芹菜牛肉（水饺）</h3>-->
<!--            <p>芹菜牛肉</p>-->
<!--            <P>￥20</P>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="right">-->
<!--          <div>-->
<!--            &lt;!&ndash;                        <i class="iconfont icon-jianhao-"></i>&ndash;&gt;-->
<!--          </div>-->
<!--          <p>-->
<!--            &lt;!&ndash;                        <span>2</span>&ndash;&gt;-->
<!--          </p>-->
<!--          <div>-->
<!--            <i class="iconfont icon-jiahao-"></i>-->
<!--          </div>-->
<!--        </div>-->
<!--      </li>-->
    </ul>
    <!--购物车部分-->
    <div class="cart">
      <div class="cart_left">
        <div class="left_icon" :style="totalQuantity==0 ? 'background-color:#505051;':'background-color:#3190E8;'">
          <i class="iconfont icon-gouwucheman"></i>
          <div class="quantity" v-show="totalQuantity!=0">{{totalQuantity}}</div>
        </div>
        <div class="left_info">
          <p>￥{{totalPrice}}</p>
          <p>另需配送费{{business.deliveryPrice}}￥</p>
        </div>
      </div>
      <div class="cart_right">
        <!--                不够起送费时-->
        <div class="item" v-show="totalSettle<business.starPrice" style="background-color: #535356;cursor: default;">￥{{business.starPrice}}起送</div>
        <!--                够起送费时-->
        <div class="item" @click="goToOrder" v-show="totalSettle>=business.starPrice">去结算</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
@import url('../assets/font/font_jiajian/iconfont.css');
@import url('../assets/font/font_gouwuche/iconfont.css');

/**********总容器**********/
.wrapper{
  width: 100%;
  height: 100%;
}
/**********header**********/
.wrapper header{
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
}

/**********商家logo**********/
.wrapper .logo{
  width: 100%;
  height: 35vw;
  margin-top: 12vw;

  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .logo img{
  width: 40vw;
  height: 30vw;
  border-radius: 5px;
}
/**********商家信息**********/
.wrapper .business_info{
  width: 100%;
  height: 20vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.wrapper .business_info h1{
  font-size: 5vw;
}
.wrapper .business_info p{
  font-size: 3vw;
  color: #666;
  margin-top: 1vw;
}
/**********食品列表**********/
.wrapper .foods{
  width: 100%;
  margin-bottom: 14vw;
}
.wrapper .foods li{
  width: 100%;
  border-bottom: solid 1px #ddd;
  box-sizing: border-box;
  padding: 2.5vw;
  user-select: none;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper .foods li .left{
  display: flex;
  align-items: center;
}
.wrapper .foods li .left img{
  width: 20vw;
  height: 20vw;
}
.wrapper .foods li .left .left_info{
  margin-left: 3vw;
}
.wrapper .foods li .left .left_info h3{
  font-size: 3.8vw;
  color: #555;
}
.wrapper .foods li .left .left_info p{
  font-size: 3vw;
  color: #888;
  margin-top: 2vw;
}
.wrapper .foods li .right{
  width: 16vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper .foods li .right .icon-jiahao-{
  font-size: 5.5vw;
  color: #0097ef;
  cursor: pointer;
}
.wrapper .foods li .right .icon-jianhao-{
  font-size: 5.5vw;
  color: #999;
  cursor: pointer;
}
.wrapper .foods li .right p{
  font-size: 3.6vw;
  color: #333;
}
/**********购物车部分**********/
.wrapper .cart{
  width: 100%;
  height: 14vw;

  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
}
.wrapper .cart .cart_left{
  flex-grow: 2;
  background-color: #505051;
  display: flex;
}
.wrapper .cart .cart_right{
  flex-grow: 1;

}
.wrapper .cart .cart_left .left_icon{
  width: 16vw;
  height: 16vw;
  box-sizing: border-box;
  border: solid 1.6vw #444;
  border-radius: 8vw;
  background-color: #3190e8;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: -4vw;
  margin-left: 3vw;

  position: relative;
}
.wrapper .cart .cart_left .left_icon .icon-gouwucheman{
  font-size: 7vw;
  color: #fff;
}
.wrapper .cart .cart_left .left_icon .quantity{
  width: 5vw;
  height: 5vw;
  border-radius: 2.5vw;
  background-color: red;
  color: #fff;
  font-size: 3.6vw;

  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  right: -1.5vw;
  top: -1.5vw;

}

.wrapper .cart .cart_left .left_info p{
  color: #fff;
  font-size: 4.5vw;
  margin-top: 1vw;
}
/*伪类选择器p:last-child*/
.wrapper .cart .cart_left .left_info p:last-child{
  font-size: 2.8vw;
  color: #aaa;
  margin-top: 0;
}
/*起送费够的时候*/
.wrapper .cart .cart_right .item{
  width: 100%;
  height: 100%;
  color: #fff;
  background-color: #38ca73;
  font-size: 4.5vw;
  font-weight: 700;
  user-select: none;
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;
}
/*起送费不够的时候*/
/*.wrapper .cart .cart_right .item{*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    color: #fff;*/
/*    background-color: #535356;*/
/*    font-size: 4.5vw;*/
/*    font-weight: 700;*/
/*    user-select: none;*/

/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/
</style>